<ng-container *ngIf="lvVisible">
  <ng-container *ngIf="lvAsStatus !== null">
    <span class="lv-badge-dot lv-badge-status-{{ lvAsStatus }}"></span>
    <span class="lv-badge-label" *ngIf="lvLabel !== null">
      <ng-container *ngIf="typeUtils.isTemplateRef(lvLabel)" [ngTemplateOutlet]="lvLabel"></ng-container>
      <ng-container *ngIf="typeUtils.isRealString(lvLabel)">{{ lvLabel }}</ng-container>
    </span>
  </ng-container>

  <ng-container *ngIf="lvAsStatus === null">
    <span
      *ngIf="!lvDot && showBadge()"
      class="lv-badge-circle"
      [ngClass]="{ 'lv-badge-circle-multi': showBadge() }"
      [ngStyle]="{ background: lvBackgroundColor, color: lvTextColor }"
      [@showBadge]
    >
      <ng-container *ngIf="lvValue <= lvMaxValue">
        <ng-container *ngFor="let item of maxValueArray; let i = index">
          <span class="lv-badge-value" *ngIf="valueArray[i] !== undefined" #lvBadgeValue>
            <p *ngFor="let k of countArray">{{ k }}</p>
          </span>
        </ng-container>
      </ng-container>
      <ng-container *ngIf="lvValue > lvMaxValue">
        <span class="lv-badge-max">
          {{ lvMaxValue }}
        </span>
        <span class="lv-badge-plus" [@showPlus]>+</span>
      </ng-container>
    </span>
    <span
      *ngIf="lvDot && showBadge()"
      class="lv-badge-dot"
      [ngStyle]="{ background: lvBackgroundColor, color: lvTextColor }"
      [@showBadge]
    ></span>
  </ng-container>
</ng-container>
